<script setup lang="ts">
import { ref, nextTick } from "vue";
import navbar from "@/components/navbar/navbar.vue";
import goodsWaterfallIndex from "@/components/goods/goodsWaterfallIndex.vue";
import { onPageScroll } from "@dcloudio/uni-app";
import { jump, router, toast } from "@/utils/tools";
import { onShareAppMessage } from "@dcloudio/uni-app";
import { onReachBottom } from "@dcloudio/uni-app";
import updateApp from "@/utils/updateApp";
import { onLoad } from "@dcloudio/uni-app";
import { apiLogin } from "@/apis/login";
import { getToken, login, setToken, wxLogin } from "@/utils/auth";
import cache from "@/utils/cache";
import { onShow } from "@dcloudio/uni-app";
import { apiSlideList } from "@/apis";
import { apiProductPage, typesInfo } from "@/apis/product";
import { computed } from "vue";
import { reactive } from "vue";
import { onLaunch } from "@dcloudio/uni-app";
import { onPullDownRefresh } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
import { activitiesInfo } from "@/apis/user";
import { onReady } from "@dcloudio/uni-app";
import { getImgSrc } from "@/utils/tools";

const userStore = useUserStore();
const searchParams = ref("");

const pageNum = ref(1);
const pageSize = ref(10);
const pageList = ref([]);
const leftList = ref([]);
const rightLists = ref([]);
const userinfo = reactive({});
const orderField = ref("default");
const orderType = ref("desc");
const types = ref(null);
const tag1 = ref(true);
const tag2 = ref(true);
const tag3 = ref(true);
const isMore = ref(false);
const cityProvinceStr = ref("北京市朝阳区");
const noReadNumTip = ref(0);
let appUser = ref({});
const content = ref();
const appCommodityList: any = ref([]);
const appActivitiesResults: any = ref([]);
const endTime = ref();
const userSelectList = reactive([
  {
    name: "价格",
    type: "price",
    id: 0,
  },
  {
    name: "认证",
    type: "approve",
    id: 1,
  },
  {
    name: "折扣",
    type: "ratePrice",
    id: 2,
  },
  {
    name: "筛选",
    type: "filters",
    id: 3,
  },
]);
const userSelectListInd = ref(0);
const columns = reactive([
  [
    {
      label: "雪月夜",
      // 其他属性值
      id: 2021,
      // ...
    },
    {
      label: "冷夜雨",
      id: 804,
    },
  ],
]);
const criteriaId = ref();
const navbarFixed = ref(false);
const placeholder = ref("请输入您想要搜索的奇石/店铺");
const slideSwiper = ref([]);

// 打开分享
onShareAppMessage((e: any) => {});

// 触底下拉下一页
onReachBottom((e: any) => {});

// 监听用户下拉刷新
onPullDownRefresh(() => {});

onLoad((options: any) => {
  //console.log(options, "评选活动id");
  criteriaId.value = options.id;
  getActivitiesInfo(options.id);
  // timer()
});

onShow(async () => {
  nextTick(() => {
    closeChange();
  });
  if (criteriaId.value) {
    await getActivitiesInfo(criteriaId.value);
    await timer();
  }
});

const getActivitiesInfo = async (id: any) => {
  let res = await activitiesInfo({ id });
  content.value = res.data.content;
  let arrAppCommodityList = res.data.appCommodityList;
  let arrAppActivitiesResults = res.data.appActivitiesResults;
  if (
    !Array.isArray(arrAppCommodityList) ||
    (Array.isArray(arrAppCommodityList) && arrAppCommodityList.length === 0)
  ) {
    //console.log("arr is null or an empty array1");
    appCommodityList.value = [];
  } else {
    appCommodityList.value = arrAppCommodityList;
  }
  if (
    !Array.isArray(arrAppActivitiesResults) ||
    (Array.isArray(arrAppActivitiesResults) &&
      arrAppActivitiesResults.length === 0)
  ) {
    //console.log("arr is null or an empty array2");
    appActivitiesResults.value = [];
  } else {
    appActivitiesResults.value = arrAppActivitiesResults;
  }
  endTime.value = res.data.endTime;
  //console.log(endTime.value, "------endtime");
};
const goCriteria = () => {
  uni.navigateTo({
    url: `/pagesMerchand/selection-criteria?id=${criteriaId.value}`,
  });
};
const popup = ref();
const addClick = () => {
  popup.value.open();
};
const change = (e: any) => {
  //console.log("弹窗状态改变：", e);
};
const closeChange = async () => {
  popup.value.close();
};
const releaseMyqs = () => {
  router(`/pagesMerchand/publish-activities?id=${criteriaId.value}`);
};
const releaseCheck = () => {
  router(`/pagesMerchand/check-publish?id=${criteriaId.value}`);
};
const addShow = ref(false);
const putitAwayShow = ref(true);
const putitAway = (item: any) => {
  if (item.open) {
    item.open = false;
  } else {
    item.open = true;
  }
};
const timer = async () => {
  let endTimestr = new Date(endTime.value);
  // 获取当前时间
  let currentTime = new Date();
  if (currentTime > endTimestr) {
    addShow.value = true; // 如果当前时间超过了updateTime，将isShows设置为false
  }
};
const goDetails = (item: any) => {
  uni.navigateTo({
    // url: `/pagesMerchand/activities-details?id=${item.id}`,
    url: `/pagesMerchand/stone-details?id=${item.id}`,
  });
};

const isImg = (url = "") => {
  if (
    url.indexOf(".png") > -1 ||
    url.indexOf(".jpg") > -1 ||
    url.indexOf(".jpeg") > -1 ||
    url.indexOf(".webp") > -1
  ) {
    return true;
  }
  return false;
};
const getUrl = (src) => {
  if (isImg(src)) {
    return src;
  }

  return src + "?x-oss-process=video/snapshot,t_0,f_jpg";
};
onReady(() => {});
</script>

<template>
  <navbar :fixed="navbarFixed" :back="true" title="最美奇石评选大赛" />
  <view class="container">
    <view class="header">
      <view class="px-title">最美奇石评选大赛</view>
      <view class="px-bz" @click="goCriteria">
        <uv-icon name="question-circle-fill" color="#BF0103"></uv-icon>
        <view>评选标准</view>
      </view>
    </view>
    <view class="rich-text">
      <uv-parse :content="content"></uv-parse>
    </view>
    <view class="add-cs">
      <view class="add-cs-title">
        <view class="add-cs-title-lf">【我的参赛奇石】</view>
        <view class="add-cs-title-rit">
          <uv-icon
            name="plus-circle-fill"
            :color="addShow ? '#BEBEBE' : '#BF0103'"
            @click="addClick"
          ></uv-icon>
          <view class="add-cs-title-rit-text">
            <uv-button
              :plain="true"
              text="添加参赛奇石"
              size="mini"
              :disabled="addShow"
              color="#BF0103"
              :custom-style="{ border: 'none' }"
              @click="addClick"
            ></uv-button>
          </view>
        </view>
      </view>
      <view
        class="add-cs-item"
        v-for="(item, index) in appCommodityList"
        :key="index"
        @click="goDetails(item)"
      >
        <view class="add-image">
          <!-- <image :src="getUrl(item.images)" /> -->
          <image :src="getImgSrc(item)" />
        </view>
        <view class="add-text">
          <view class="add-text-dec">
            {{ item.title }}
          </view>
          <view class="add-text-item">
            <view class="">
              <text>类型：</text>
              <text class="name-type">{{ JSON.parse(item.dict)[0]?.name }}</text>
            </view>
            <view class="">
              <text>成色：</text>
              <text class="name-type">{{ JSON.parse(item.dict)[1]?.name }}</text>
            </view>
          </view>
          <view class="add-text-item">
            <view class="">
              <text>品牌：</text>
              <text class="name-type">{{ JSON.parse(item.dict)[2]?.name }}</text>
            </view>
            <view class="">
              <!-- <text>更多>></text> -->
            </view>
          </view>
        </view>
      </view>
      <uv-empty
        mode="data"
        icon="https://cdn.uviewui.com/uview/empty/data.png"
        v-if="!appCommodityList.length"
      ></uv-empty>
    </view>
    <!-- 最美评选结果 -->
    <view class="add-cs">
      <view class="add-cs-title">
        <view class="add-cs-title-lf">【最美奇石评选结果】</view>
        <view class="add-cs-title-rit"> </view>
      </view>
      <view
        class="content-warp"
        v-for="(item, index) in appActivitiesResults"
        :key="index"
      >
        <view class="grade">
          <view class="grade-item">
            <view class="grade-img">
              <image
                src="@/static/images/1D@2x.png"
                v-if="item.winningRank === '一等奖'"
              />
              <image
                src="@/static/images/2D@2x.png"
                v-if="item.winningRank === '二等奖'"
              />
              <image
                src="@/static/images/3D@2x.png"
                v-if="item.winningRank === '三等奖'"
              />
            </view>
            <view class="gradetext">{{ item.winningRank }}：</view>
          </view>
          <view class="grade-item" @click="putitAway(item)">
            <text class="grade-sq">收起</text>
            <uv-icon
              name="arrow-up-fill"
              color="#BEBEBE"
              v-if="item.open"
            ></uv-icon>
            <uv-icon name="arrow-down-fill" color="#BEBEBE" v-else></uv-icon>
          </view>
        </view>
        <view
          class="add-cs-item-wrap"
          v-for="(itemts, index) in item.appCommodityList"
          :key="index"
          v-if="item.open"
        >
          <view class="add-cs-item" style="box-shadow: none">
            <view class="add-image">
              <image :src="itemts.images" />
            </view>
            <view class="add-text">
              <view class="add-text-dec">
                {{ itemts.title }}
              </view>
              <view class="add-text-item">
                <view class="">
                  <text>类型：</text>
                  <text class="name-type">{{
                    JSON.parse(itemts.dict)[0]?.name
                  }}</text>
                </view>
                <view class="">
                  <text>成色：</text>
                  <text class="name-type">{{
                    JSON.parse(itemts.dict)[1]?.name
                  }}</text>
                </view>
              </view>
              <view class="add-text-item">
                <view class="">
                  <text>品牌：</text>
                  <text class="name-type">{{
                    JSON.parse(itemts.dict)[2]?.name
                  }}</text>
                </view>
                <view class="">
                  <text>更多>></text>
                </view>
              </view>
            </view>
          </view>
          <view class="pyu">
            <text class="pyu-title">评语：</text>
            {{ itemts.comment }}
          </view>
        </view>
      </view>
      <!-- 暂无数据 -->
      <uv-empty
        mode="data"
        icon="https://cdn.uviewui.com/uview/empty/data.png"
        v-if="!appActivitiesResults.length"
      ></uv-empty>
    </view>
    <uv-popup
      ref="popup"
      @change="change"
      mode="bottom"
      :close-on-click-overlay="false"
      round="10"
      zIndex="10075"
    >
      <view class="popup-content">
        <view class="popup-item" @click="releaseCheck">选择我的奇石</view>
        <uv-line></uv-line>
        <view class="popup-item" @click="releaseMyqs">上架我的奇石</view>
        <uv-line></uv-line>
        <view class="popup-item" @click="closeChange">取消</view>
      </view>
    </uv-popup>
  </view>
</template>

<style lang="scss" scoped>
.container {
  background: url("https://www.stoneplayer.com/background/underlay.jpg") no-repeat;
  background-size: 100% 310px;
  padding: 0 20rpx;
  width: 100%;
  // height: 100vh;
  .header {
    padding: 20rpx 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .px-title {
      font-size: 56rpx;
      color: #fff;
    }
    .px-bz {
      width: 160rpx;
      height: 46rpx;
      border-radius: 14px;
      color: rgba(181, 71, 48, 1);
      font-size: 24rpx;
      background: #fff;
      text-align: center;
      line-height: 46rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
}
.rich-text {
  height: 680rpx;
  border-radius: 32rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  padding: 20rpx;
}
.add-cs {
  // height: 660rpx;
  border-radius: 32rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  margin-top: 24rpx;
  padding: 30rpx;
}
.add-cs-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
}
.add-cs-title-rit {
  color: rgba(191, 1, 3, 1);
  font-size: 24rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.add-cs-title-lf {
  font-size: 32rpx;
}
// .add-cs-title-rit-text{
//   margin-left: 10rpx;
// }
.add-cs-item {
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 40rpx;
}
.add-cs-item-wrap {
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 40rpx;
}
.add-text {
  flex: 1;
}
.add-text-dec {
  color: rgba(16, 16, 16, 1);
  font-size: 28rpx;
  margin-bottom: 10rpx;
  font-weight: bold;
}
.add-text-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.add-image {
  width: 174rpx;
  height: 180rpx;
  margin-right: 20rpx;
  image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }
}
.name-type {
  color: #bf0103;
  font-weight: bold;
}
.pyu {
  font-size: 28rpx;
  padding: 0 30rpx 30rpx 30rpx;
}
.pyu-title {
  font-weight: bold;
}
.grade {
  margin-bottom: 20rpx;
}
.grade,
.grade-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.grade-img {
  width: 60rpx;
  height: 60rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.gradetext {
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 20rpx;
}
.grade-sq {
  color: rgba(190, 190, 190, 1);
  font-size: 24rpx;
  margin-right: 10rpx;
}
.popup-content {
  padding: 20rpx 0;
}
.popup-item {
  text-align: center;
  padding: 20rpx 0;
  font-size: 32rpx;
}
.content-warp {
  margin-bottom: 40rpx;
}
</style>
